<template>
<RsWrap class="sys-role" @resize="onResize">
    <div class="rs-toolbar">
        <el-button-group>
            <el-button type="primary" size="small" icon="rs-icon-add-circle-fill" @click="onAdd">新增</el-button>
            <el-button type="warning" size="small" icon="rs-icon-user-add-fill" :disabled="disabledUserBtn" @click="onAddUser">添加用户</el-button>
            <el-button type="danger" size="small" icon="el-icon-circle-close" :disabled="disabledUserBtn" @click="onDelUser">删除用户</el-button>
            <el-button type="success" size="small" icon="el-icon-search" :disabled="disabledUserBtn" @click="onShowUser">查看用户</el-button>
            <!-- <el-button type="success" size="small" icon="el-icon-circle-close" @click="onQuery">查询</el-button>
            <el-button type="danger" size="small" icon="el-icon-circle-close" @click="onClearQuery">清空</el-button> -->
        </el-button-group>
    </div>
    <el-table
        ref="table"
        :max-height="tableHeight"
        :height="tableHeight"
        :data="roles"
        border
        size="small"
        highlight-current-row
        style="width: 100%"
        @row-click="onRowClick"
        >
            <el-table-column type="index" label="序号" width="50" align="center"></el-table-column>
            <el-table-column prop="jsnm" label="角色编号" width="150"></el-table-column>
            <el-table-column prop="jsmc" label="角色名称" width="180"></el-table-column>
            <el-table-column prop="jslxmc" label="角色类型" width="80"></el-table-column>
            <el-table-column prop="jsjbmc" label="角色级别" width="80"></el-table-column>
            <el-table-column prop="jsxh" label="排序号" width="70"></el-table-column>
            <el-table-column
                fixed="right"
                label="操作"
                minWidth="100">
                <template slot-scope="scope" v-if="scope.row.jsbh!='ROLE_SYSADMIN'">
                    <el-button class="rs-table-btn" @click="onEdit(scope.row)" type="text" size="mini">编辑</el-button>
                    <el-button class="rs-table-btn" @click="onDelete(scope.row)" type="text" size="mini">删除</el-button>
                </template>
            </el-table-column>
    </el-table>
    <RsPagination :currentPage="query.page" :pageSize="query.pageSize" :totalCount="totalCount" @change="onPageInfoChange"></RsPagination>
    <RoleForm ref="form"></RoleForm>
    <RoleUserDlg ref="userDlg" :depts="depts"></RoleUserDlg>
</RsWrap>
</template>
<script>
import tips from '../../mixin/tips'
import RoleForm from './roleForm'
import RoleUserDlg from './roleUserDlg'
import role from '@/api/role'
export default {
    name:'RolePage',
    mixins:[tips],
    components:{RoleForm,RoleUserDlg},
    data(){
        return {
            tableHeight:0,
            roles:[],
            totalCount:0,
            selectedRow:null,
            query:{
               page:0,
               pageSize:20 
            },
            depts:[]
        }
    },
    created(){
        this.loadRoles();
        this.loadDeptTree();
    },
    computed:{
        disabledUserBtn(){
            return this.selectedRow == null;
        }
    },
    methods:{
        onResize(obj){
            this.tableHeight = obj.height - 68;
        },
        onAdd(){
            this.$refs.form.show({})
            .then((action)=>{
                if( action === 'ok'){
                    this.loadRoles();
                }
            });
        },
        onEdit(row){
            this.$refs.form.show(row)
            .then((action)=>{
                if( action === 'ok'){
                    this.loadRoles();
                }
            });
        },
        onDelete(row){
            this.$confirm('是否删除该角色？', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
                closeOnClickModal:false
            }).then((action) => {
                this.deleteRole(row);
            }).catch((action) => {
            });
        },
        deleteRole(row){
            const ids = []
            ids.push(row.jsbh)
            role.delRole(ids)
            .then(response => {
                const { data } = response;
                if(data.error_code == 0){
                    this.loadRoles();
                    this.showInfo("操作成功！");
                }else{
                    this.showError("操作失败！");
                }
            }).catch(error => {
                this.showError("操作失败！");
            });
        },
        onAddUser(){
            this.$refs.userDlg.show({
                type:0,
                jsbh:this.selectedRow.jsbh
            })
            .then((action)=>{
                if(action ==='ok'){

                }
            })
        },
        onDelUser(){
            this.$refs.userDlg.show({
                type:1,
                jsbh:this.selectedRow.jsbh
            })
            .then((action)=>{
                if(action ==='ok'){

                }
            })
        },
        onShowUser(){
            this.$refs.userDlg.show({
                type:2,
                jsbh:this.selectedRow.jsbh
            })
            .then((action)=>{
                if(action ==='ok'){

                }
            })
        },
        onRowClick(row,column,event){
            this.selectedRow = row;
        },
        onQuery(){},
        onClearQuery(){},
        onPageInfoChange(obj){
            this.query.pageSize = obj.pageSize;
            this.query.page = obj.currentPage;
            this.loadRoles();
        },
        loadRoles(clk){
            this.loading = true;
            role.queryRole(this.query)
            .then(response => {
                this.loading = false;
                const { data } = response;
                if( data.error_code == 0 ){
                    
                    this.roles = data.list;
                    this.totalCount = data.totalCount;
                }else{
                    this.showError("操作失败！");
                }
            }).catch(error => {
                this.loading = false;
            });
        },
        loadDeptTree(){
            role.queryDeptTree()
            .then(response => {
                const { data } = response;
                if( data.error_code == 0 ){
                    
                    this.depts = data.list;
                }else{
                }
            }).catch(error => {
            });
        }
    }
}
</script>